/* 选中页面内所有元素 */

* {
    /* 清除外边距 */
    margin: 0;
    /* 清除内边距 */
    padding: 0;
}

/* 选中页面内的<body>元素 */

body {
    /* 背景设为#27283b颜色值 */
    background-color: #27283b;
}

/* 选中页面内的<div class="bird">元素 */

div.bird {
    /* 宽度设为200像素 */
    width: 200px;
    /* 高度设为200像素 */
    height: 200px;
    /* 设为基于<body>元素进行绝对定位 */
    position: absolute;
    /* 设为距离<body>元素最上边有50%像素 */
    top: 50%;
    /* 设为距离<body>元素最左边有50%像素 */
    left: 50%;
    /* 当前元素X轴向左移动50%像素，Y轴向上移动50%像素 */
    transform: translate(-50%, -50%);
}

/* 选中页面内的<div class="big">元素 */

div.big {
    /* 当前元素的边框宽度设为100像素 */
    border-width: 100px;
    /* 当前元素的上边框颜色设为透明色、右边框颜色设为透明色、下边框颜色设为#d72928值以及左边框颜色设为#db3e3d值 */
    border-color: transparent transparent #d72928 #db3e3d;
}

/* 选中页面内的<div class="middle">元素 */

div.middle {
    /* 当前元素的边框宽度设为80像素 */
    border-width: 80px;
    /* 当前元素的上边框颜色设为#f8d245值、右边框颜色设为透明色、下边框颜色设为#f2f2f2值以及左边框颜色设为#ffffff值 */
    border-color: #f8d245 transparent #f2f2f2 #ffffff;
    /* 设为距离<div class="bird">元素最上边有10%像素 */
    top: 10%;
    /* 设为距离<div class="bird">元素最左边有10%像素 */
    left: 10%;
}

/* 选中页面内的<div class="small">元素 */

div.small {
    /* 当前元素的边框宽度设为40像素 */
    border-width: 40px;
    /* 当前元素的上边框颜色设为透明色、右边框颜色设为#f7a703值、下边框颜色设为透明色以及左边框颜色设为透明色 */
    border-color: transparent #f7a703 transparent transparent;
    /* 设为距离<div class="bird">元素最上边有30%像素 */
    top: 30%;
    /* 设为距离<div class="bird">元素最左边有30%像素 */
    left: 30%;
}

/* 选中页面内的<div class="small" ::before>元素 */

div.small::before {
    /* 当前元素的内容设为空 */
    content: "";
    /* 背景设为#000颜色值 */
    background-color: #000;
    /* 宽度设为20像素 */
    width: 20px;
    /* 高度设为20像素 */
    height: 20px;
    /* 设为基于<div class="small">元素进行绝对定位 */
    position: absolute;
    /* 设为距离<div class="small">元素最上边有-10像素 */
    top: -10px;
    /* 设为距离<div class="small">元素最右边有20像素 */
    right: 20px;
    /* 当前元素的边框设为圆角 */
    border-radius: 50%;
}

/* 
选中页面内的元素： 
<div class="big">,<div class="middle">
*/

div.big,
div.middle,
div.small {
    /* 设为基于<div class="bird">元素进行绝对定位 */
    position: absolute;
    /* 当前元素的边框设为圆角 */
    border-radius: 50%;
    /* 当前元素的Z轴顺时针旋转45度 */
    transform: rotate(45deg);
    /* 当前元素的边框线条设为实线 */
    border-style: solid;
    /* 当前元素的动画过渡时间设为0.5秒 */
    transition: 0.5s;
}

/* 
选中页面内的元素： 
<div class="bird" :hover>
  <div class="big">
*/

div.bird:hover>div.big {
    /* 当前元素的Z轴顺时针旋转225度 */
    transform: rotateZ(225deg);
    /* 当前元素的上边框颜色设为透明色、右边框颜色设为透明色、下边框颜色设为#1fe8b6值以及左边框颜色设为#16d7a7值 */
    border-color: transparent transparent #1fe8b6 #16d7a7;
}

/* 
选中页面内的元素： 
<div class="bird" :hover>
  <div class="middle">
*/

div.bird:hover>div.middle {
    /* 当前元素的Z轴逆时针旋转135度 */
    transform: rotateZ(-135deg);
    /* 当前元素的上边框颜色设为透明色、右边框颜色设为#f8d245值、下边框颜色设为#fff值以及左边框颜色设为#f2f2f2值 */
    border-color: transparent #f8d245 #fff #f2f2f2;
}

/* 
选中页面内的元素： 
<div class="bird" :hover>
  <div class="small">
*/

div.bird:hover>div.small {
    /* 当前元素的Z轴顺时针旋转135度 */
    transform: rotateZ(135deg);
    /* 当前元素的上边框颜色设为透明色、右边框颜色设为#f7a703值、下边框颜色设为透明色以及左边框颜色设为透明色 */
    border-color: transparent #f7a703 transparent transparent;
}